(function(){
    let hotData = [
        {
          city: "北京", // 城市
          sales: "25, 179", // 销售额
          flag: true, //  上升还是下降
          brands: [
            //  品牌种类数据
            { name: "可爱多", num: "9,086", flag: true },
            { name: "娃哈哈", num: "8,341", flag: true },
            { name: "喜之郎", num: "7,407", flag: false },
            { name: "八喜", num: "6,080", flag: false },
            { name: "小洋人", num: "6,724", flag: false },
            { name: "好多鱼", num: "2,170", flag: true }
          ]
        },
        {
          city: "河北",
          sales: "23,252",
          flag: false,
          brands: [
            { name: "可爱多", num: "3,457", flag: false },
            { name: "娃哈哈", num: "2,124", flag: true },
            { name: "喜之郎", num: "8,907", flag: false },
            { name: "八喜", num: "6,080", flag: true },
            { name: "小洋人", num: "1,724", flag: false },
            { name: "好多鱼", num: "1,170", flag: false }
          ]
        },
        {
          city: "上海",
          sales: "20,760",
          flag: true,
          brands: [
            { name: "可爱多", num: "2,345", flag: true },
            { name: "娃哈哈", num: "7,109", flag: true },
            { name: "喜之郎", num: "3,701", flag: false },
            { name: "八喜", num: "6,080", flag: false },
            { name: "小洋人", num: "2,724", flag: false },
            { name: "好多鱼", num: "2,998", flag: true }
          ]
        },
        {
          city: "江苏",
          sales: "23,252",
          flag: false,
          brands: [
            { name: "可爱多", num: "2,156", flag: false },
            { name: "娃哈哈", num: "2,456", flag: true },
            { name: "喜之郎", num: "9,737", flag: true },
            { name: "八喜", num: "2,080", flag: true },
            { name: "小洋人", num: "8,724", flag: true },
            { name: "好多鱼", num: "1,770", flag: false }
          ]
        },
        {
          city: "山东",
          sales: "20,760",
          flag: true,
          brands: [
            { name: "可爱多", num: "9,567", flag: true },
            { name: "娃哈哈", num: "2,345", flag: false },
            { name: "喜之郎", num: "9,037", flag: false },
            { name: "八喜", num: "1,080", flag: true },
            { name: "小洋人", num: "4,724", flag: false },
            { name: "好多鱼", num: "9,999", flag: true }
          ]
        }
      ];
      hotData.forEach((obj,index)=>{
          let theLi = `<li class='${index ===0?'active':''}'>
          <span>${obj.city}</span>
          <span>${obj.sales}<s class="${obj.flag?'icon-up':'icon-down'}"></s></span>
          </li>`
          $('.inner .sup').append(theLi)
      })

      //封装函数,拆分brands数组，创建新li列表，放入ul
      function load(index=0){
        hotData[index].brands.forEach((rightObj,index)=>{
let theRightLi=`<li><span>${rightObj.name}</span><span>${rightObj.num} <s class="${rightObj.flag?'icon-up':'icon-down'}"></s></span></li>`
$('.inner .sub').append(theRightLi)
        })
      }
      load()

      $('.top .sup li').on('mouseenter',function(){
        clearInterval(t)
        // 同步下标
        newIndex=$(this).index()
$(this).addClass('active').siblings().removeClass('active')
$('.top .sub').empty()
load(newIndex)
      })
      $('.top .sup li').on('mouseleave',function(){
        topInterval()
      })

      //设置定时器
      let newIndex = 0//从0开始
      let t
      function topInterval(){
t=setInterval(()=>{
newIndex++
if(newIndex===$('.top .sup li').length){
  newIndex=0
}
$('.top .sup li').eq(newIndex).addClass('active').siblings().removeClass('active')
// empty()删除匹配的元素集合中所有的子节点。
$('.top .sub').empty()
load(newIndex)
},2000)
      }
      topInterval()
})()